<template> 
  <el-dialog
  :title="!menu.id ? '新增菜单' : '修改菜单'"
  :close-on-click-modal="true"
  :visible.sync="visible">
    <el-form :model="menu"
             :rules="rules"
             ref="menu"
             label-width="150px">
      <el-form-item label="上级菜单：" required>
        <el-select v-model="menu.pid"
                   placeholder="请选择菜单">
          <el-option
            v-for="item in menuList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型：" prop="type" required>
        <el-radio-group v-model="menu.type">
          <el-radio v-for="(type, index) in typeList" :label="index" :key="index">{{ type }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单名称：" prop="name" required>
        <el-input v-model="menu.name"></el-input>
      </el-form-item>
      <el-form-item label="权限值：" prop="value">
        <el-input v-model="menu.value"></el-input>
      </el-form-item>
      <el-form-item label="前端资源路径：">
        <el-input v-model="menu.uri"></el-input>
      </el-form-item>
      <el-form-item label="前端图标：" prop="icon">
        <el-input v-model="menu.icon" style="width: 80%"></el-input>
        <svg-icon style="margin-left: 8px" :icon-class="menu.icon"></svg-icon>
      </el-form-item>
      <el-form-item label="是否显示：" required>
        <el-radio-group v-model="menu.status">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="menu.sort"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="onSubmit('menu')">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import {updateMenu,createMenu,getMenu,queryNotButtonList} from '@/api/ums/menu'

  //菜单实体
  const defaultMenu={
      id:'',
      pid: '',
      name: '',
      value: null,
      icon:null,
      type: '',
      uri:null,
      status: 1,
      sort:1000
  };

  export default {
    name: 'menuDetail',
    data() {
        const validateUrl = (rule, value, callback) => {
          if (this.menu.type === 1 && !/\S/.test(value)) {
              callback(new Error('菜单URL不能为空'))
          } else {
              callback()
          }
      }
      return {
        visible: false,
        menu:Object.assign({}, defaultMenu),
        typeList: ['目录', '菜单', '按钮'],
        rules: {
          name: [
            {required: true, message: '请输入菜单名', trigger: 'blur'}
          ],
          pid: [
              { required: true, message: '上级菜单不能为空', trigger: 'change' }
          ],
          uri: [
              { validator: validateUrl, trigger: 'blur' }
          ]
        },
        menuList: [],
      }
    },
    created() {

    },
    methods: {
        //初始化
        init (id) {
            this.menu.id = id || 0
            queryNotButtonList().then(response => {
                this.menuList = response.data
                this.menuList.unshift({id: 0, name: '无上级菜单'});
            }).then(() => {
                this.visible = true
            }).then(() => {
                if (!this.menu.id) {
                  this.resetForm('menu');
                } else {
                    // 修改
                    getMenu(id).then(response => {
                        if(response && response.code == 200){
                            this.menu = response.data;
                        }else{
                            this.resetForm('menu');
                        }
                    });
                }
            })
        },
        //提交
        onSubmit(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$confirm('是否提交菜单', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                if (this.menu.id) {
                  updateMenu(this.menu.id, this.menu).then(response => {
                      if(response && response.code == 200){
                          this.resetForm('menu');
                          this.$message({
                              message: '修改成功',
                              type: 'success',
                              duration:1000,
                              onClose: () => {
                                  this.visible = false
                                  this.$emit('refreshDataList')
                              }
                          });
                      }else {
                          this.$message.error(response.msg)
                      }
                  });
                } else {
                  createMenu(this.menu).then(response => {
                      if(response && response.code == 200){
                          this.resetForm('menu');
                          this.$message({
                              message: '修改成功',
                              type: 'success',
                              duration:1000,
                              onClose: () => {
                                  this.visible = false
                                  this.$emit('refreshDataList')
                              }
                          });
                      }else {
                          this.$message.error(response.msg)
                      }
                  });
                }
              });
            } else {
              this.$message({
                message: '验证失败',
                type: 'error',
                duration:1000
              });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.menu = Object.assign({},defaultMenu);
      }
    }
  }
</script>
<style>
</style>


